<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="flex justify-between">
                <el-button type="primary" size="default" @click="handleAdd">新增</el-button>
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="技能名称" prop="name"></el-table-column>
                <el-table-column label="技能TAG" prop="tag_name">
                    <!-- <template slot-scope="{row}">
                        <el-tag type="success" size="normal"  effect="dark">{{ items[row.tag] }}</el-tag>
                    </template> -->
                </el-table-column>
                <el-table-column label="技能图标" prop="icon">
                    <template slot-scope="{row}">
                        <el-image :src="row.icon" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="技能效果" prop="special">
                    <template slot-scope="{row}">
                        <el-image v-if="row.special" :src="row.special" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="横幅" prop="banner_url">
                    <template slot-scope="{row}">
                        <el-image v-if="row.banner_url" :src="row.banner_url" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="横幅字体颜色" prop="banner_color"></el-table-column>
                <el-table-column label="技能说明" prop="desc"></el-table-column>
                <el-table-column label="创建时间" prop="created_at"></el-table-column>
                <el-table-column label="状态" prop="is_show">
                    <template slot-scope="scoped">
                        <el-tag v-if="scoped.row.is_show === 0" type="danger">停用</el-tag>
                        <el-tag v-if="scoped.row.is_show === 1" type="success">使用中</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            v-if="scope.row.is_show === 0"
                            size="mini"
                            type="text"
                            @click="handleStatus(scope.row,1)"
                        >使用
                        </el-button>
                        <el-button
                            v-if="scope.row.is_show === 1"
                            size="mini"
                            type="text"
                            @click="handleStatus(scope.row,2)"
                        >停用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
        <el-dialog
            title="配置技能"
            :visible.sync="dialogVisible"
            width="30%"
            @close="closeDialog('form')">
            
            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="170px" size="normal">
                <el-form-item label="技能名称" prop="name">
                    <el-input
                    v-model="formData.name"
                    placeholder="请输入技能名称"
                    />
                </el-form-item>
                <el-form-item label="技能TAG" prop="tag">
                    <el-radio-group v-model="formData.tag" size="normal">
                        <el-radio v-for="item in items" :key="item.tag" :label="item.tag" class="radioStyle">{{ item.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="等级颜色" prop="color">
                    <el-input
                        v-model="formData.color"
                        placeholder="请输入等级颜色"
                    />
                </el-form-item>
                <el-form-item label="技能图标" prop="icon">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.icon, 'show_box': !formData.icon}">
                            <img v-if="formData.icon" :src="formData.icon" class="avatar" />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess1"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="技能动效" prop="">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.special, 'show_box': !formData.special}">
                            <img v-if="formData.special" :src="formData.special" class="avatar" />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess2"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove2"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="选中图片" prop="selected_icon">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.selected_icon, 'show_box': !formData.selected_icon}">
                            <img v-if="formData.selected_icon" :src="formData.selected_icon" class="avatar" />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess3"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove3"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="横幅" prop="banner_url">
                    <div class="awardBox">
                        <div class="awardInfo" :class="{'hide_box': formData.banner_url, 'show_box': !formData.banner_url}">
                            <img v-if="formData.banner_url" :src="formData.banner_url" class="avatar" />
                            <el-upload
                                v-else
                                ref="upload"
                                :auto-upload="true"
                                :http-request="customizeUpload"
                                :on-success="handlePictureSuccess4"
                                action=""
                                class="upload-demo"
                                :limit="1"
                                list-type="picture-card"
                            >
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <span class="closeIcon" @click="handlePictureRemove4"><i class="el-icon-delete"></i></span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="横幅基本文案颜色">
                    <el-input v-model="formData.banner_color.default" placeholder="请输入横幅基本文案颜色"></el-input>
                </el-form-item>
                <el-form-item label="横幅动态文案颜色">
                    <el-input v-model="formData.banner_color.dynamic" placeholder="请输入横幅动态文案颜色"></el-input>
                </el-form-item>

                <el-form-item label="横幅宠物品质文案颜色">
                    <el-input v-model="formData.banner_color.pet" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="横幅送礼人文案颜色">
                    <el-input v-model="formData.banner_color.user" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="横幅收礼人文案颜色">
                    <el-input v-model="formData.banner_color.target" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="横幅礼物文案颜色">
                    <el-input v-model="formData.banner_color.gift" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label="是否每日重制" prop="is_remake">
                    <el-radio-group v-model="formData.is_remake">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="is_show">
                    <el-radio-group v-model="formData.is_show">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否为被动技能" prop="is_passive">
                    <el-radio-group v-model="formData.is_passive">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="品质要求" prop="room-score">
                    <el-radio-group v-model="formData.quality">
                        <el-radio :label="1">N</el-radio>
                        <el-radio :label="2">R</el-radio>
                        <el-radio :label="3">SR</el-radio>
                        <el-radio :label="4">SSR</el-radio>
                        <el-radio :label="5">UR</el-radio>
                    </el-radio-group>
                    <!-- <el-select v-model="formData.quality" value-key="" placeholder="选择萌宠品质" clearable filterable>
                        <el-option v-for="item in qualityList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <!-- <el-form-item v-if="formData.quality > 3" label="技能配置" prop="room-score">
                    <div>
                        <span>LV.1</span>
                        <el-input v-model="formData.count" placeholder="进入房间增加的热力值" size="normal" clearable></el-input>
                    </div>
                    <div>
                        <span>LV.2</span>
                        <el-input v-model="formData.count" placeholder="进入房间增加的热力值" size="normal" clearable></el-input>
                    </div>
                </el-form-item> -->

                <el-form-item label="技能说明" prop="desc">
                    <el-input
                        v-model="formData.desc"
                        rows="5"
                        placeholder="请输入技能说明"
                        size="normal"
                        clearable
                    ></el-input>
                    
                </el-form-item>
                
            </el-form>
            
            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAllocationSkill">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
    import { petSkillList, petSkillSave, petSkillIsShow, petSkillTagList } from '@/api/petsManagement'
    import addEditModal from './childComps/addEditModal'
  	export default {
        name: 'petSkill',
        components: {addEditModal},
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                options: [],
                formData: {
                    id: undefined,
                    name: undefined,
                    icon: undefined,
                    color: undefined,
                    selected_icon: undefined,
                    special: undefined,
                    tag: undefined,
                    desc: undefined,
                    is_remake: 1,
                    quality: 1,
                    is_passive: 1,
                    is_show: 1,
                    banner_url: undefined,
                    banner_color: {
                        default: undefined,
                        dynamic: undefined,
                        target: undefined,
                        user: undefined,
                        gift: undefined,
                        pet: undefined
                    },
                },
                rules: {
                    name: [{ required: true, message: '请输入技能名称', trigger: 'blur' }],
                    icon: [{ required: true, message: '请上传技能图片', trigger: 'blur' }],
                    selected_icon: [{ required: true, message: '请上传选中图片', trigger: 'blur' }],
                },
                qualityList: [
                    {
                        value: 1,
                        label: 'N'
                    },
                    {
                        value: 2,
                        label: 'R'
                    },
                    {
                        value: 3,
                        label: 'SR'
                    },
                    {
                        value: 4,
                        label: 'SSR'
                    },
                    {
                        value: 5,
                        label: 'UR'
                    }
                ],
                items: []
            }
        },
        created() {
            this.getPetSkillTagList()
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
                }
                const {data, code} = await petSkillList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.data
                    this.total = data.total
                }
                this.loading = false
        
            },
            getPetSkillTagList() {
                petSkillTagList().then(res => {
                    if(res.code === 200) {
                        this.items = []
                        for(let i in res.data) {
                            this.items.push({
                                tag: i,
                                name: res.data[i]
                            })
                        }
                    }
                })
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
                this.formData = {
                    id: undefined,
                    name: undefined,
                    icon: undefined,
                    color: undefined,
                    selected_icon: undefined,
                    special: undefined,
                    tag: undefined,
                    desc: undefined,
                    is_remake: 1,
                    quality: 1,
                    is_passive: 1,
                    is_show: 1,
                    banner_url: undefined,
                    banner_color: {
                        default: undefined,
                        dynamic: undefined,
                        target: undefined,
                        user: undefined,
                        gift: undefined,
                        pet: undefined
                    },
                }
            },
            handleEdit(row) {
                this.dialogVisible = true
                this.formData = JSON.parse(JSON.stringify(row))
                this.formData.banner_color = this.formData.banner_color ? JSON.parse(this.formData.banner_color) : {
                    default: undefined,
                    dynamic: undefined,
                    target: undefined,
                    user: undefined,
                    gift: undefined,
                    pet: undefined
                }
            },
            handleStatus(row, type) {
                if(type == 1) {
                    this.$confirm('确定技能状态改为使用中？使用中会在客户端生效', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        petSkillIsShow({
                            id: row.id,
                            is_show: 1
                        }).then(res => {
                            if(res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                if(type == 2) {
                    this.$confirm('确定技能状态改为停用？停用后不显示在客户端', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        petSkillIsShow({
                            id: row.id,
                            is_show: 0
                        }).then(res => {
                            if(res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                
            },
            handleAdd() {
                this.dialogVisible = true
            },
            handlePictureSuccess1() {
                this.formData.icon = this.ossLastImgUrl
            },
            handlePictureRemove1() {
                this.formData.icon = undefined
            },
            handlePictureSuccess2() {
                this.formData.special = this.ossLastImgUrl
            },
            handlePictureRemove2() {
                this.formData.special = undefined
            },
            handlePictureSuccess3() {
                this.formData.selected_icon = this.ossLastImgUrl
            },
            handlePictureRemove3() {
                this.formData.selected_icon = undefined
            },
            handlePictureSuccess4() {
                this.formData.banner_url = this.ossLastImgUrl
            },
            handlePictureRemove4() {
                this.formData.banner_url = undefined
            },
            handleAllocationSkill() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        // for (let key in this.formData) {
                        //     this.formData[key] = this.formData[key] == '' ? undefined : this.formData[key] == 0 ? 0 : this.formData[key]
                        // }
                        this.formData.banner_color = JSON.stringify(this.formData.banner_color)
                        petSkillSave(this.formData).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                    }
                })
            },
        }
    }
</script>
  
<style lang="scss" scoped>
::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}
.radioStyle {
    width: 100px;
    margin-bottom: 15px;
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  